<template>
  <div class="approved-vehicle-management">
    <div class="card">
      <el-form :inline="true" :model="searchForm">
        <el-form-item label="车辆类型">
          <el-input
            v-model="searchForm.typeName"
            placeholder="请输入车辆品牌或颜色"
            clearable
          />
        </el-form-item>
        <el-form-item label="车牌号">
          <el-input
            v-model="searchForm.licensePlate"
            placeholder="请输入车牌号"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-card shadow="never">
      <el-table
        v-loading="loading"
        :data="tableData"
        border
        stripe
        style="width: 100%"
      >
        <el-table-column label="申请人" width="200" align="center">
          <template slot-scope="{ row }">
            {{ row.user ? row.user.username : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="车辆品牌" width="200" align="center">
          <template slot-scope="{ row }">
            {{ typeof row.type === 'string' && row.type ? row.type.split('·')[0] : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="颜色" width="200" align="center">
          <template slot-scope="{ row }">
            {{ typeof row.type === 'string' && row.type && row.type.split('·').length > 1
              ? row.type.split('·')[1]
              : '-' }}
          </template>
        </el-table-column>

        <el-table-column prop="load_capacity" label="核载人数" width="200" align="center" />

        <el-table-column prop="license_plate_number" label="车牌号" width="250" align="center" />

        <el-table-column label="车辆图片" min-width="150" align="center">
          <template slot-scope="{ row }">
            <el-image
              v-if="row.image"
              style="width: 80px; height: 80px"
              :src="row.image"
              fit="cover"
              :preview-src-list="[row.image]"
            />
            <span v-else>-</span>
          </template>
        </el-table-column>

      </el-table>

      <div class="pagination" style="margin-top: 20px; text-align: center;">
        <el-pagination
          background
          :current-page.sync="searchForm.page"
          :page-size.sync="searchForm.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="getList"
          @size-change="getList"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import { getVehicleApproval } from '@/api/vehicleService'

export default {
  name: 'ApprovedVehicleList',
  data() {
    return {
      loading: false,
      total: 0,
      tableData: [],
      searchForm: {
        typeName: '',
        licensePlate: '',
        page: 1,
        pageSize: 10
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      this.loading = true
      try {
        const params = {
          page: this.searchForm.page,
          paginate: this.searchForm.pageSize,
          state: 1
        }

        // 车辆类型搜索
        if (this.searchForm.typeName) {
          params.brand = this.searchForm.typeName.trim()
        }

        // 车牌号搜索
        if (this.searchForm.licensePlate) {
          params.license_plate_number = this.searchForm.licensePlate.trim()
        }

        const res = await getVehicleApproval(params)

        if (res.code === 200 && res.data) {
          const listData = res.data.data
          this.tableData = Array.isArray(listData) ? listData : []

          this.total = typeof res.data.total === 'number' ? res.data.total : this.tableData.length
        } else {
          this.$message.error(res.message || '获取失败')
          this.tableData = []
          this.total = 0
        }
      } catch (err) {
        console.error('获取车辆列表异常:', err)
        this.$message.error('网络错误，获取失败')
        this.tableData = []
        this.total = 0
      } finally {
        this.loading = false
      }
    },

    handleSearch() {
      this.searchForm.page = 1
      this.getList()
    },

    resetSearch() {
      this.searchForm = {
        typeName: '',
        licensePlate: '',
        page: 1,
        pageSize: 10
      }
      this.getList()
    }
  }
}
</script>

<style scoped lang="scss">
.approved-vehicle-management {
  padding: 20px;
  background: #f5f7fa;

  .card {
    background: #fff;
    padding: 20px;
    border-radius: 4px;
    margin-bottom: 20px;
  }
}

::v-deep(.el-card) {
  border: none;
}
</style>
